<template>
    <div class="UploadResume">
        <el-dialog title="请上传附件简历" width="350px" :visible.sync="UploadResumeFlag" @close="UploadResumeClose">
            <div class="box">
                <div class="tips">仅支持PDF格式文件<br/>文件不要超过10M</div>
                <el-upload ref="uploadFile" class="upload" action="#" :on-change="handleFile" :limit="1" :http-request="upload" accept="application/pdf">
                    <el-button type="primary" class="btn" slot="trigger">上传附件简历</el-button>
                </el-upload>
            </div>
		</el-dialog>
    </div>
</template>

<script>
    import {uploadFile,resumeAdd} from '@/api/api'
    export default {
        //组件注入
        components: {},
        inject:['reload'],
        //存放数据
        data() {
            return {
                UploadResumeFlag: false,
                flie:{},
                userId:'',
                routeName:'',
            }
        },
        //接受父组件传递的值
        props:{
            UploadResume: {
                type: Boolean,
                default: false
            }
        },
        //监控data中的数据变化
        watch: {
            UploadResume(newVaL){
                this.UploadResumeFlag = newVaL
            },
        },
        //方法集合
        methods: {
            //弹出关闭
            UploadResumeClose(){
                this.$emit('UploadResumeClose')
            },
            //上传附件
            handleFile(file){
                let isLt10M = file.size / 1024 / 1024 < 10
                let type = file.name.substring(file.name.lastIndexOf(".") + 1)
                if (!isLt10M) {
                    this.$message.error('上传文件大小不能超过 10MB!')
                    this.$refs.uploadFile.clearFiles()
                    return false
                }
                if(!(type=='pdf')){
                    this.$message.error('请上传PDF格式的文件')
                    this.$refs.uploadFile.clearFiles()
                    return false
                }
                this.file = file.raw
            },
            //上传接口
            upload(){
                let date = new Date().getFullYear() +'/'+ (new Date().getMonth()+1)
                let formData = new FormData();
                formData.append('file',this.file,this.file.name);
                formData.append('biz','private/user/'+date);
                uploadFile(formData).then(res =>{
                    if(res.code==200){
                        resumeAdd({
                            'userId': this.userId,
                            'type': 1,
                            'lanType': 0,
                            'fileId': res.result.fileId,
                        }).then(res =>{
                            console.log(res);
                            if(res.code==200){
                                this.$message.success('上传成功');
                                this.UploadResumeFlag = false
                                this.reload();
                            }else{
                                this.$refs.uploadFile.clearFiles()
                                this.$message.error(res.message);
                            }
                        });
                    }else{
                        this.$message.error(res.message);
                    }
                });
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            if(JSON.parse(localStorage.getItem('userInfo'))){
                this.userId = JSON.parse(localStorage.getItem('userInfo')).userId
            }
            this.routeName = this.$route.name
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .UploadResume{
        .box{height: auto;overflow: hidden;
            .tips{font-size: 14px;color: #999;text-align: center;}
            .upload{width: 300px;float: left;text-align: center;;
                .btn{width: 310px;margin: 20px auto 0;display: block;}
                .el-upload-list{text-align: left;display: none;}
            }
        }
    }
</style>